<template>
  <f7-page class="c2c-transaction-page" :class="{'bg-color-white': logs.length === 0}" @page:afterin="init">
    <f7-navbar>
      <f7-nav-left>
        <a href="#" class="link back"><i class="icon icon-back"></i><span class=""> </span></a>
        <a href="/c2c-record/" class="link record-icon">
          <i class="iconfont icon-bantuanrizhi"></i>
        </a>
      </f7-nav-left>
      <f7-nav-title>
        <f7-segmented raised>
          <f7-button :tab-link-active="tabIndex===0" @click="toggleTab(0)">{{$t('m.ct1')}}</f7-button>
          <f7-button :tab-link-active="tabIndex===1" @click="toggleTab(1)">{{$t('m.ct2')}}</f7-button>
        </f7-segmented>
      </f7-nav-title>
      <f7-nav-right>
        <a href="#" class="link" @click="filterPanel = true">
          <i class="iconfont icon-shezhi"></i>
        </a>
      </f7-nav-right>
    </f7-navbar>

    <no-content-tips v-if="logs.length === 0"></no-content-tips>
    <ul class="c2c-list" v-else>
      <li v-for="(item, index) in logs" :key="index">
        <div class="left">
          <div class="user-box"><h3><span>{{item.user.nick?item.user.nick[0]:item.user.username[0]}}</span>{{item.user.nick?item.user.nick:item.user.username}}</h3></div>
          <p>{{$t('m.ct15')}}{{item.num}}USDT</p>
          <p>{{$t('m.ct16')}}{{item.min}}-{{item.max}}CNY</p>
          <div class="pay-types-imgs-box">
            <img :src="img | imgFilter" alt="" v-for="(img, idx) in item.passPayTypes" :key="idx">
          </div>
        </div>
        <div class="right">
          <p>{{item.order_comnum}}|{{item.order_rate * 100}}%</p>
          <p>{{$t('m.ct17')}}</p>
          <h2>{{item.price}}CNY</h2>
          <f7-button fill :color="tabIndex === 0?'green': 'red'" @click="buyOrSell(item)">{{tabIndex === 0 ?$t('m.ct18'):$t('m.ct19')}}</f7-button>
        </div>
      </li>
    </ul>

    <f7-fab position="right-bottom" slot="fixed" color="#1898ff" class="release-fab">
      <f7-icon ios="f7:rocket_fill" aurora="f7:rocket_fill" md="f7:rocket_fill"></f7-icon>
      <f7-icon ios="f7:xmark" aurora="f7:xmark" md="f7:xmark"></f7-icon>

      <f7-fab-buttons position="top">
        <f7-fab-button :label="$t('m.ct5')" color="purple" @click="handleFabClick(2)">
          <f7-icon icon="iconfont icon-dingdan"></f7-icon>
        </f7-fab-button>
        <f7-fab-button :label="$t('m.ct4')" color="green" @click="handleFabClick(1)">
          <f7-icon icon="iconfont icon-chushou"></f7-icon>
        </f7-fab-button>
        <f7-fab-button :label="$t('m.ct3')" color="red" @click="handleFabClick(0)">
          <f7-icon icon="iconfont icon-baobao"></f7-icon>
        </f7-fab-button>
      </f7-fab-buttons>
    </f7-fab>

    <f7-panel style="width: 80%" backdrop right resizable :opened="filterPanel" @panel:closed="filterPanel = false">
      <f7-view>
        <f7-page class="c2c-panel bg-color-white">
          <select-item :title="$t('m.ct6')" v-model="bi">
            <select-item-child :value="0">{{$t('m.ct7')}}</select-item-child>
            <select-item-child :value="1">USDT</select-item-child>
          </select-item>
          <select-item :title="$t('m.ct8')" v-model="fabi">
            <select-item-child :value="0">{{$t('m.ct7')}}</select-item-child>
            <select-item-child :value="1">CNY(cny)</select-item-child>
          </select-item>
          <select-item :title="$t('m.ct9')" v-model="country">
            <select-item-child :value="0">{{$t('m.ct7')}}</select-item-child>
            <select-item-child :value="1">{{$t('m.china')}}</select-item-child>
          </select-item>
          <select-item :title="$t('m.ct10')" v-model="filterItems.pay_type">
            <select-item-child :value="0">{{$t('m.ct7')}}</select-item-child>
            <select-item-child :value="1">{{$t('m.bank')}}</select-item-child>
            <select-item-child :value="2">{{$t('m.alipay')}}</select-item-child>
            <select-item-child :value="3">{{$t('m.wechat')}}</select-item-child>
          </select-item>
          <select-item :show-after-button="false" :title="$t('m.ct11')">
            <input type="text" :placeholder="$t('m.ct12')" v-model="filterItems.num">
          </select-item>
          <f7-toolbar bottom class="filter-toolbar">
            <f7-button color="white" @click="resetFilter">{{$t('m.ct13')}}</f7-button>
            <f7-button color="blue" class="no-border-radius" @click="handleFilter">{{$t('m.ct14')}}</f7-button>
          </f7-toolbar>
        </f7-page>
      </f7-view>
    </f7-panel>

    <!-- Sheet Push -->
    <f7-sheet class="my-sheet" backdrop :opened="buySellSheet" @sheet:closed="sheetClosed">
      <div class="buy-sell-sheet">
        <div class="title-box">
          <h3>{{getType}}USDT</h3>
          <p>{{$t('m.ct17')}} <span>{{currentItem.price}}CNY</span></p>
        </div>

        <div class="tab-box">
          <van-tabs v-if="buySellSheet" v-model="buyTabAction" color="#1898ff" @change="buyNum = null">
            <van-tab :title="$t('m.ct24')">
              <div class="input-box">
                <input type="text" :placeholder="`${$t('m.ct25')}${getType}${$t('m.ct26')}`" v-model="buyNum">
                <div>
                  <span>CNY</span>
                  <f7-link @click="buyNum = currentItem.max">{{$t('m.ct7')}}{{getType}}</f7-link>
                </div>
              </div>
              <p>{{$t('m.ct20')}}{{currentItem.min}}-{{currentItem.max}}CNY <span>{{getBuyUsdt}}USDT</span></p>
              <p>{{$t('m.ct21')}} <span>{{buyNum || 0}}CNY</span></p>

              <div class="buttons">
                <f7-button fill color="gray" large @click="cancelTransaction">{{$t('m.cancel')}}</f7-button>
                <f7-button fill color="blue" large @click="pwdModal = true">{{$t('m.ct22')}}</f7-button>
              </div>
            </van-tab>
            <van-tab :title="`${getType}${$t('m.ct15')}`">
              <div class="input-box">
                <input type="text" :placeholder="`${$t('m.ct23')}${getType}${$t('m.ct15')}`" v-model="buyNum">
                <div>
                  <span>USDT</span>
                  <f7-link>{{$t('m.ct7')}}{{getType}}</f7-link>
                </div>
              </div>
              <p>{{$t('m.ct20')}}{{currentItem.min}}-{{currentItem.max}}CNY <span>{{getBuyUsdt}}USDT</span></p>
              <p>{{$t('m.ct21')}} <span>{{getBuyNumUsdtTotal}}CNY</span></p>

              <div class="buttons">
                <f7-button fill color="gray" large @click="cancelTransaction">{{$t('m.cancel')}}</f7-button>
                <f7-button fill color="blue" large @click="pwdModal = true">{{$t('m.ct22')}}</f7-button>
              </div>
            </van-tab>
          </van-tabs>
        </div>

      </div>
    </f7-sheet>

    <van-dialog
      v-model="pwdModal"
      :title="$t('m.transactionPwdPlaceholder')"
      show-cancel-button
      @confirm="handleSubmitOrder"
      getContainer="body"
    >
      <div class="content-padding margin-t30">
        <custom-input type="password" :placeholder="$t('m.transactionPwdPlaceholder')" v-model="pwd"></custom-input>
      </div>
    </van-dialog>
  </f7-page>
</template>

<script>
  import SelectItem from '../ajComponents/selectItem/select-item'
  import SelectItemChild from '../ajComponents/selectItem/item-child'
  import { getMyPayTypes } from "../api/my";
  import { getAllSellList, runCTCBuy } from "../api/find";

  export default {
    name: "c2c-transaction",
    data () {
      return {
        filterPanel: false,
        bi: 0,
        fabi: 0,
        country: 0,
        filterItems: {
          pay_type: 0,
          num: '',
          ctc_id: 2
        },
        buySellSheet: false,
        buyTabAction: 0,
        logs: [],
        tabIndex: 0,
        currentItem: {},
        buyNum: null,
        pwdModal: false,
        pwd: ''
      }
    },
    filters: {
      imgFilter(imgType) {
        switch (imgType) {
          case '1': return require('../static/bank_card.png');
          case '2': return require('../static/alipay.png');
          case '3': return require('../static/wechat.png');
        }
      }
    },
    computed: {
      userInfo() {
        return this.$store.getters.userInfo.user;
      },
      getBuyUsdt() {
        return this.buyNum / this.currentItem.price;
      },
      getType() {
        return this.tabIndex === 0?this.$t('m.ct18'):this.$t('m.ct19');
      },
      getBuyNumUsdtTotal() {
        return this.buyNum * this.currentItem.price;
      }
    },
    mounted() {
      // this.init();
    },
    methods: {
      init() {
        getAllSellList(this.filterItems).then(res => {
          this.logs = res.data.map(item => {
            this.$set(item, 'passPayTypes', item.pay_type.split(','));
            return item;
          });
        })
      },
      toggleTab(index) {
        this.tabIndex = index;
        this.filterItems.ctc_id = index === 0?2: 1;
        this.resetFilter();
        this.init();
      },
      resetFilter() {
        this.bi = 0;
        this.fabi = 0;
        this.country = 0;
        this.filterItems.pay_type = 0;
        this.filterItems.num = '';
      },
      handleFilter() {
        this.init();
        this.filterPanel = false;
      },
      handleFabClick (type) {
        // console.log(type)
        if (type === 2) {
          this.$f7router.navigate('/my-orders/');
        } else {
          if (this.userInfo.audit !== '2') {
            this.$dialog.confirm({
              message: this.$t('m.ct27'),
              confirmButtonText: this.$t('m.ct28')
            }).then(() => {
              this.$f7router.navigate('/verified/'); // 实名认证
            }).catch(() => {})

            return;
          }
          getMyPayTypes().then(res => {
            if (res.data.length === 0) {
              this.$dialog.confirm({
                message: this.$t('m.ct29'),
                confirmButtonText: this.$t('m.ct30')
              }).then(() => {
                this.$f7router.navigate('/my-pay-types/'); // 支付方式认证
              }).catch(() => {})
            } else {
              this.$f7router.navigate('/buy-or-sell/', {context: {type: type === 1?2: 1}});
            }

          })
          // this.$f7router.navigate('/set-user-info/') // 完善用户信息
          // this.$f7router.navigate('/merchants-settled/') // 商家认证
          /*this.$dialog.confirm({
            message: '请先启用您的收款账户',
            confirmButtonText: '设置'
          }).then(() => {
            // on confirm
            this.$f7router.navigate('/my-pay-types/')
          }).catch(() => {
            // on cancel
          })*/
        }
      },
      sheetClosed() {
        this.buySellSheet = false;
        this.buyNum = '';
        this.buyTabAction = 0;
        this.pwd = '';
      },
      cancelTransaction() {
        this.buySellSheet = false;
      },
      handleSubmitOrder() {
        this.buySellSheet = false;
        const order = {
          pwd: this.pwd,
          vol: this.buyNum,
          ctc_id: this.currentItem.ctc_id,
          order_id: this.currentItem.id,
          type: this.buyTabAction + 1
        }
        runCTCBuy(order).then(res => {
          const nextParams = {
            order_id: res.order_id,
            trade_id: res.trade_id,
            ctc_id: this.currentItem.ctc_id,
          }
          this.$f7router.navigate('/please-pay/', {context: {nextParams}});
        })
      },
      buyOrSell(item) {
        this.currentItem = item;
        this.buySellSheet = true;
      },
    },
    components: {
      SelectItem,
      SelectItemChild
    }
  }
</script>

<style scoped lang="scss">
  .c2c-transaction-page {
    .record-icon {
      position: absolute;
      left: 50px;
    }
    /deep/ .title {
      width: 250px!important;
      overflow: visible;
    }
  }
  .c2c-list {
    padding-top: $padding20;
    li {
      display: flex;
      justify-content: space-between;
      background: #fff;
      padding: $padding20;
      margin-bottom: $padding20;
      p {
        color: $colorGrey;
        font-size: 20px;
      }
      .left {
        .user-box {
          display: flex;
          align-items: center;
          padding-bottom: 40px;
          img {
            width: 50px;
            border-radius: 50%;
            margin-right: 10px;
          }
          h3 {
            font-weight: bold;
            span {
              display: inline-block;
              width: 50px;
              height: 50px;
              background: $colorGrey;
              color: white;
              text-align: center;
              line-height: 50px;
              border-radius: 50%;
              margin-right: 10px;
            }
          }
        }
        p {
          padding-bottom: 5px;
        }
        .pay-types {
          img {
            width: 30px;
          }
        }
      }
      .right {
        text-align: right;
        p:nth-child(2) {
          margin: 10px 0;
        }
        h2 {
          color: $mainColor;
          margin-bottom: $padding20;
        }
        .button {
          background-color: $zhangColor;
          &.color-red {
            background: $dieColor;
          }
        }
      }
    }
  }
  .release-fab {
    .icon {
      font-size: 50px;
    }
  }
  .c2c-panel {
    padding: $padding;
    input {
      border: 2px solid #82a6f0;
      width: 100%;
      height: 60px;
      padding: 0 $padding20;
    }
  }
  .buy-sell-sheet {
    padding: $padding;
    .title-box {
      h3 {
        font-weight: bold;
      }
      p {
        font-weight: bold;
        padding-top: 10px;
        span {
          color: $mainColor;
        }
      }
    }
    .tab-box {
      .input-box {
        margin-top: $padding20;
        display: flex;
        border: 1px solid $colorGrey;
        position: relative;
        margin-bottom: 10px;
        input {
          width: 100%;
          height: 80px;
          padding: 0 200px 0 20px;
        }
        > div {
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 25px;
        }
      }
      p {
        display: flex;
        justify-content: space-between;
        color: $colorGrey;
        font-size: 25px;
        padding: 5px 0;
      }
      .buttons {
        display: flex;
        padding: $padding20 0;
        .button {
          flex: 1;
          border-radius: 0;
          &:first-child {
            margin-right: $padding20;
          }
        }
      }
    }
  }

</style>
